<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>日扫码统计</title>
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
<!-- 全局js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/js/echarts-all.js"></script>
<script src="${ctx}/js/plugins/layer/laydate/laydate.js"></script>
<script src="${ctx}/js/echartUtil.js"></script>
<script type="text/javascript">
	$(function() {
		//外部js调用
		laydate({
			elem : '#startDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			event : 'focus' //响应事件。如果没有传入event，则按照默认的click
		});
		//日期范围限制
		var start = {
			elem : '#startDate',
			format : 'YYYY-MM-DD',
			min : laydate.now(-180), //设定最小日期为当前日期
			max : laydate.now(), //设定最大日期为当前日期
			istime : false,
			istoday : true,
			choose : function(datas) {
				end.min = datas; // 开始日选好后，重置结束日的最小日期
				end.start = datas; //将结束日的初始值设定为开始日
			}
		};
		var end = {
			elem : '#endDate',
			format : 'YYYY-MM-DD',
			max : laydate.now(), //设定最大日期为当前日期
			istime : false,
			istoday : true,
			choose : function(datas) {
				start.max = datas; //结束日选好后，重置开始日的最大日期
			}
		};
		laydate(start);
		laydate(end);
	});
</script>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content" style="height: 80px">
						<form class="form-horizontal">
							<div class="form-group">
								<label class="col-lg-1 control-label lg">时间段：</label>
								<div class="col-sm-3">
									<input id="startDate"
										class="laydate-icon form-control layer-date" placeholder="开始日" />
								</div>
								<div class="col-sm-3">
									<input class="laydate-icon form-control layer-date"
										id="endDate" placeholder="结束日" />
								</div>
								<button class="btn btn-success"
									onclick="selectChart(); return false;">确定</button>
							</div>
						</form>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-content" style="height: 400px;">
								<div class="flot-chart-content" id="flot-dashboard-chart">柱状图区域</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		changeChart(null, null);

		function selectChart() {
			var startDate = $("#startDate").val();
			var endDate = $("#endDate").val();
			changeChart(startDate, endDate);
		}

		function changeChart(startDate, endDate) {
			var Chart = echarts.init(document
					.getElementById("flot-dashboard-chart"));

			Chart.showLoading({
				text : '正在努力的读取数据中...'
			});
			$.ajax({
				type : "post",
				url : "${ctx}/statistics/getSRECharts",
				data : {
					startDate : startDate,
					endDate : endDate
				},
				dataType : "json",
				success : function(data) {
					Chart.hideLoading();
					var title = "日扫码量统计";
					var subTitle = "按天统计";
					var legend = [ '扫码数量' ];
					var xAxis = data.xAxisData;
					var series = [ {
						name : '扫码数量',
						type : 'line',
						stack : '总量',
						data : data.seriesData
					} ];
					setEchartOption(Chart, title, subTitle, legend, xAxis,
							series);
					window.onresize = function() {
						Chart.resize(); //自适应
					}
				}
			});
		}
	</script>
</body>
</html>